<template>
	<view>
		<view class="bg-white">
			<view class="u-search-box" @click="gosearch()">
				<view class="u-search-inner">
					<u-icon style="margin-top: 6rpx;" name="search" color="#909399" :size="28"></u-icon>
					<text class="u-search-text">Search keywords</text>
				</view>
			</view>
			<swiperSearch :topList="slideList" name="telBook" keyName="img"></swiperSearch>

			<view class="si-block f32 fbox fbox-acenter fbox-jbetween">
				<view class="fbox fbox-acenter">
					<image src="/static/telbook/record.png" mode="widthFix"></image>
					<text>Total Record {{shopNum}}</text>
				</view>
				<view class="fbox fbox-acenter">
					<image src="/static/mu.png" mode="widthFix"></image>
					<text>Total View {{browseNum}}</text>
				</view>
			</view>
			<view class="si-list f26 color3 fbox fbox-jbetween fbox-start">
				<view class="si-list-item fbox tc fbox-column fbox-acenter fbox-jcenter" @click="click(0)">
					<image src="/static/telbook/phonebook1.png"></image>
					<text>Category</text>
				</view>
				<view class="si-list-item fbox tc fbox-column fbox-acenter fbox-jcenter" @click="click(1)">
					<image src="/static/telbook/phonebook2.png"></image>
					<text>My Followed</text>
				</view>
				<view class="si-list-item fbox tc fbox-column fbox-acenter fbox-jcenter" @click="click(2)">
					<image src="/static/telbook/phonebook3.png"></image>
					<text>Viewed Record</text>
				</view>
				<view class="si-list-item fbox tc fbox-column fbox-acenter fbox-jcenter" @click="click(3)">
					<image src="/static/telbook/phonebook4.png"></image>
					<text>My Directory</text>
				</view>
			</view>
			<view class="new-box">
				<view class="">
					<image src="/static/bizcircles/new_icon.png" mode=""></image>
				</view>
				<u-notice-bar mode="vertical" icon="" :text="textList" color="#999" direction="column" bg-color='#fff'>
				</u-notice-bar>
			</view>
			<view class="apply" @click="submit">
				<image src="/static/information/box.png"></image>
				<view class="text">
					<view class="s">APPLY</view>
					<view class="x">Directory</view>
				</view>
			</view>
		</view>
		<!--#ifdef APP -->
		<u-sticky offset-top="20">
			<!--#endif-->
			<view class="tab-box">
				<view class="tab">
					<view :class="index==0?'lan':'hei'" class="color3" @click="tab(0)">
						{{ $t('Business.Nearest') }}
						<view class="xian" v-if="index==0"></view>
					</view>
					<view :class="index==1?'lan':'hei'" class="color3" @click="tab(1)">
						{{ $t('Business.TotalViewed') }}
						<view class="xian" v-if="index==1"></view>
					</view>
					<view :class="index==2?'lan':'hei'" class="color3" @click="tab(2)">
						{{ $t('Business.Lastest') }}
						<view class="xian" v-if="index==2"></view>
					</view>
				</view>
			</view>
			<!--#ifdef APP -->
		</u-sticky>
		<!--#endif-->
		<view class="">
			<telbook :list="infoList"></telbook>
		</view>
	</view>
</template>


<script>
	import swiperSearch from "@/components/swiper-search.vue"
	import telbook from "@/components/telbook.vue"
	export default {
		components: {
			swiperSearch,
			telbook
		},
		data() {
			return {
				current: 0,
				index: 0,
				browseNum: '',
				shopNum: '',
				infoList: [],
				slideList: [],
				textList: [],
			}
		},
		onPullDownRefresh() {
			this.goodsinfo()
		},
		onLoad() {
			this.goodsinfo()
		},
		methods: {
			submit(){
				uni.navigateTo({
					url:'/pages/telBook/dayareleasei/index'
				})
			},
			gosearch() {
				uni.navigateTo({
					url: "/pages/searchbox/index?name=" + 'telBook'
				})
			},
			tab(e) {
				this.index = e
				let params
				switch (+e) {
					case 0:
						params = {
							map: 'applet_mobile_shop_list',
							sort: 'new',
							cate: '',
							page: '0',
						}
						break
					case 1:
						params = {
							map: 'applet_mobile_shop_list',
							sort: 'hot',
							cate: '',
							page: '0',
						}
						break
					case 2:
						params = {
							map: 'applet_mobile_shop_list',
							sort: 'nearby',
							cate: '',
							page: '0',
						}
						break
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.infoList = res.data.data
					} else {

					}
				})
			},
			click(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/telBook/caregory/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/telBook/list/index?index=' + index
					})
				}
			},
			goodsinfo() {
				this.tab(0)
				const params = {
					map: 'applet_mobile_index'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.slideList = res.data.data.slideList
						this.textList = res.data.data.noticeList.map(item => {
							return item + 'registered'
						})
						this.browseNum = res.data.data.browseNum
						this.shopNum = res.data.data.shopNum
						uni.stopPullDownRefresh()
					} else {
						uni.stopPullDownRefresh()
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.u-search-box {
		padding: 10rpx 30rpx;

		.u-search-inner {
			background-color: #f4f5f7;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			padding: 5rpx 30rpx;
		}

		.u-search-text {
			font-size: 26rpx;
			color: $u-tips-color;
			margin-left: 10rpx;
		}
	}



	.si-block {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		color: #8f8f8f;
		background-color: #f7f7f7;

		image {
			width: 35rpx;
			margin-right: 10rpx;
		}
	}

	.si-list {
		margin-top: 30rpx;

		.si-list-item {
			width: 190rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}

	.new-box {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx 10rpx 30rpx;
		margin-top: 30rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.apply {
		position: fixed;
		background-color: #39b8ff;
		background: linear-gradient(#00aaff, #0055ff);
		right: 0;
		top: 54%;
		color: #FFFFFF;
		padding: 4rpx 20rpx;
		border-radius: 40rpx 0 0 40rpx;
		font-style: oblique;
		display: flex;
		justify-content: space-between;
		opacity: 0.8;
		z-index: 99999999999;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}

		.text {
			text-align: center;

			.s {
				font-size: 26rpx;
				font-weight: bold;
			}

			.x {
				font-size: 22rpx;
				border-top: 1px solid #FFFFFF;
			}
		}
	}

	.tab-box {
		border-bottom: 1px solid #e2e4e6;
		padding: 20rpx 0;
		margin-top: 10rpx;
		background-color: #FFFFFF;

		.tab {
			padding: 0 60rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 600;
		}

		.lan {
			color: #2497ff;
		}

		.hei {
			color: #333333;
		}

		.xian {
			width: 60%;
			height: 10rpx;
			background-color: #2497ff;
			border-radius: 20rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 100%);
		}

	}

	.tab>view {
		position: relative;
	}
</style>
